<template>
	<view class="">
		<!-- 状态栏 -->
		<view class="status_bar">
		</view>
		<view class="home-index">
			<Tabs></Tabs>
			<view class="deviceList">
				<view class="title">
					<view class="name">
						<text class="">企业</text>
						<view class="dot"></view>
						<text class="num">{{companyCount}}</text>
					</view>
					<!-- <text class="iconfont icon-sousuo sousuo"></text> -->
					<image src="../../static/images/sousuo.png" mode=""></image>
				</view>
				<scroll-view scroll-y="true" class="list-index">
					<view class="list">
						<view :class="['item',activeIndex==index?'active':'']" v-for="(item,index) in deviceCountList" @click="handleItem(item,index)">
							<view class="name">
								<text class="comp">{{item.companyName}}</text>
								<view class="num">
									<image style="width: 25px;height: 20px;" src="../../static/images/video1.png" mode=""></image>
									6
								</view>
							</view>
							<view class="cont">
								<view class="code">
									{{item.corporate}} {{item.phone_number}}
								</view>
								<view class="compName">
									{{item.address}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="play">
				<view class="nodata">
					<!-- <text class="iconfont icon-tishi"></text> -->
					<image src="../../static/images/notice.png" mode=""></image>
					<view class="">
						请选择设备
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import http from '../../api/http.js'
	import Tabs from '../../components/tabs.vue'
	// const demoTextView = uni.requireNativePlugin('EZUI-Module_DemoTextView')
	const dcRichAlert = uni.requireNativePlugin('DCloud-RichAlert')
	export default {
		data() {
			return {
				title: 'Hello',
				// url:''
				activeIndex:-1,
				currentItem:{},
				deviceCountList:[],
				companyCount:0
			}
		},
		components:{
			Tabs
		},
		onLoad() {
			this.getCompanyCount()
			this.getCompanyDeviceCountList()
		},
		methods: {
			handleItem(item,index){
				console.log(item,"当前对象")
				this.activeIndex = index;
				this.currentItem = item;
				// console.log(this.currentItem)
				
			},
			//获取最新企业及管理设备数量
			getCompanyDeviceCountList(){
				http.post('app/getCompanyDeviceCountList').then(res=>{
					console.log(res,"设备列表")
					this.deviceCountList = res.deviceCountList
				})
			},
			//企业总数
			getCompanyCount(){
				http.post('app/getCompanyCount').then(res=>{
					console.log(res,"设备数")
					this.companyCount = res.deviceCount
				})
			},
		}
	}
</script>
<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #FFFFFF;
	}
</style>
<style lang="less" scoped>
	.home-index{
		display: flex;
		height: calc(100vh - var(--status-bar-height));
		// overflow: hidden;
		.deviceList{
			display: flex;
			flex-direction: column;
			width: 40%;
			padding: 0 10px;
			box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
			.title{
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #F3F3F3;
				height: 60px;
				// padding: 10px 0;
				.name{
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 24px;
					color: #235FA7;
				}
				.dot{
					// display: inline-block;
					width: 4px;
					height: 4px;
					border-radius: 50%;
					background-color: #929292;
					margin: 0 10px;
				}
				.num{
					font-size: 16px;
					color: #929292;
				}
				.sousuo{
					color: #235FA7;
					font-size: 18px;
					font-weight: bold;
				}
				image{
					width: 20px;
					height: 20px;
				}
			}
			.list-index{
				height: calc(100vh - 60px - var(--status-bar-height));
			}
			.list{
				display: flex;
				flex-direction: column;
				.item{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					border-bottom: 1px solid #F3F3F3;
					padding: 10px 0;
					.name{
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 18px;
						color: #235FA7;
						.comp{
							font-size: 18px;
							font-weight: bold;
						}
						.num{
							display: flex;
							align-items: center;
							color: #0F75BF;
						}
					}
					.cont{
						display: flex;
						justify-content: space-between;
						margin-top: 10px;
						font-size: 12px;
					}
				}
				.active{
					background-color: #F5F7FB;
				}
			}
		}
		.play{
			display: flex;
			flex:1;
			.nodata{
				display: flex;
				flex-direction: column;
				background-color: #E6F0F6;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100%;
				color: #929292;
				image{
					width: 22px;
					height: 22px;
				}
			}
			
		}
	}
</style>
